<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/house/new-house' }">房源管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加新房源</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider>主图</el-divider>

    <div class="picture-list" style="overflow: hidden">

      <el-upload
          class="picture-uploader"
          action="http://localhost:9202/resources/upload/image/product"
          :show-file-list="false"
          :on-success="handleUploadSuccess1">
        <i class="el-icon-upload picture-uploader-icon"></i>
        <div class="picture-uploader-text">仅允许上传 <i>JPG</i> / <i>PNG</i> 格式的图片</div>
        <div class="picture-uploader-text">仅允许上传不超过 <i>5MB</i> 的图片</div>
        <div class="picture-uploader-text">主图只允许一张，超出会覆盖</div>
      </el-upload>

      <div class="picture-item" v-if="ruleForm.majorImage!=''">
        <div class="delete-button" style="display: none">
          <el-button type="danger" size="mini" class="button" icon="el-icon-delete-solid"></el-button>
        </div>
          <div>
            <img :src="ruleForm.majorImage" width="100%" height="100%">
          </div>
<!--        <el-image class="image"-->
<!--                  :key="picture.url"-->
<!--                  :src="picture.url"-->
<!--                  fit="cover"></el-image>-->
      </div>

    </div>

    <el-divider>副图</el-divider>

    <div class="picture-list" style="overflow: hidden">

      <el-upload
          class="picture-uploader"
          action="http://localhost:9202/resources/upload/image/product"
          :show-file-list="false"
          :on-success="handleUploadSuccess2">
        <i class="el-icon-upload picture-uploader-icon"></i>
        <div class="picture-uploader-text">仅允许上传 <i>JPG</i> / <i>PNG</i> 格式的图片</div>
        <div class="picture-uploader-text">仅允许上传不超过 <i>5MB</i> 的图片</div>
      </el-upload>

<!--      <div class="picture-item" v-if="ruleForm.houseImage.length!=0" v-for="picture in data2">-->
<!--        <div class="delete-button" style="display: none">-->
<!--          <el-button type="danger" size="mini" class="button" icon="el-icon-delete-solid"></el-button>-->
<!--        </div>-->
<!--        <el-image class="image"-->
<!--                  :key="picture"-->
<!--                  :src="picture"-->
<!--                  fit="cover"></el-image>-->
<!--      </div>-->
      <div class="demo-image" v-if="data2.length!=0">
        <div class="block" v-for="fit in data2" :key="fit">
          <el-image
              style="width: 100px; height: 100px"
              :src="fit"
              :fit="fit"></el-image>
        </div>
      </div>

    </div>

    <el-button type="warning" @click="backToPreStep()">上一步</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="reset()">重置</el-button>

  </div>
</template>

<script>
export default {
  data() {
    return {
      // fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      // url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      roleListOptions: [],
      ruleForm: {
        name: '',
        price: '',
        houseType: '',
        area: '',
        communityDescription: '',
        floor: '',
        hasElevator: '',
        maxFloor: '',
        recom: '',
        sectionId: '',
        orientationId: '',
        agentId: '',
        houseCategoryId: '4',
        openingTime: '',
        termOfOwnership: '',
        majorImage: '',
        houseImage:'',
        timeOfDelivery:''
      },
      rules: {
        name:[
          {required: true, message: '请输入名称', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ],
        price: [
          {required: true, message: '请输入价格', trigger: 'blur'},
          {pattern: /^([1-9]\d*|0)(\.\d{1,2})?$/, message: '请输入正确价格', trigger: 'blur'}
        ],
        houseType: [
          {required: true, message: '请输入户型', trigger: 'blur'},
        ],
        area: [
          {required: true, message: '请输入面积', trigger: 'blur'}
        ],
        communityDescription: [
          {required: true, message: '请输入小区简介', trigger: 'blur'},
          {min: 4, max: 99, message: '长度在 4 到 99 个字符', trigger: 'blur'}
        ],
        floor: [
          {required: true, message: '请输入楼层', trigger: 'blur'},
          {pattern:/^[1-9]\d*$/,message: '请输入正确楼层',trigger: 'blur'}
        ],
        hasElevator: [
          {required: true, message: '请选择是否有电梯', trigger: 'blur'}
        ],
        maxFloor: [
          {required: true, message: '请输入最高楼层', trigger: 'blur'},
          {pattern:/^[1-9]\d*$/,message: '请输入正确楼层',trigger: 'blur'}
        ],
        recom: [
          {required: true, message: '请选择是否推荐', trigger: 'blur'}
        ],
        sectionId: [
          {required: true, message: '请选择区域', trigger: 'blur'}
        ],
        orientationId: [
          {required: true, message: '请选择朝向', trigger: 'blur'}
        ],
        agentId: [
          {required: true, message: '请选择经纪人', trigger: 'blur'}
        ],
        termOfOwnership: [
          {required: true, message: '请输入产权年限', trigger: 'blur'},
          {pattern:/^[1-9][0-9]?$|^70$/,message: '请输入正确产权年限',trigger: 'blur'}
        ],
        openingTime: [
          {required: true, message: '请输入开盘时间', trigger: 'blur'}
        ],
        timeOfDelivery: [
          {required: true, message: '请输入交房时间', trigger: 'blur'}
        ],
        houseImage: [
          {required: true, message: '请选择房源图片', trigger: 'blur'}
        ],
        majorImage: [
          {required: true, message: '请选择房源主图', trigger: 'blur'}
        ]
      },
      sectionList: {},
      orientationList: {},
      agentList: {},
      leaseTypeList: {id:'', leaseType: ''},
      data1: {url: ''},
      data2: []
    };
  },
  methods: {
    // 上传成功后的回调
    handleUploadSuccess1(response) {
      this.data1 = {
        url: response.data.url
      };
      this.ruleForm.majorImage = this.data1.url;
      localStorage.setItem('localRuleForm', JSON.stringify(this.ruleForm));
      this.loadLocalRuleForm();
    },
    handleUploadSuccess2(response) {
      this.data2.push(response.data.url);
      this.ruleForm.houseImage = JSON.stringify(this.data2)
      localStorage.setItem('localRuleForm', JSON.stringify(this.ruleForm));
      this.loadLocalRuleForm();
    },
    reset() {
      this.ruleForm.majorImage = '';
      this.ruleForm.houseImage = '';
      this.data2 = [];
      localStorage.setItem('localRuleForm', JSON.stringify(this.ruleForm));
      this.loadLocalRuleForm();
    },
    backToPreStep() {
      localStorage.setItem('localRuleForm', JSON.stringify(this.ruleForm));

      this.$router.push('/house/new-house/add-new-1?id=4');

    },
    submitForm(formName) {
      let url = 'http://localhost:9200/house/add-new/new-house';
      console.log('url = ' + url);
      //this.ruleForm.houseCategoryId = this.$router.currentRoute.query.houseCategoryId;
      let formData = this.qs.stringify(this.ruleForm);
      console.log(this.ruleForm,'1111111111')
      console.log('formData = ' + formData);

      this.axios.post(url, formData).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          let message = '新增新房源成功！';
          this.$alert(message, '提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.$router.push('/house/new-house');
              localStorage.removeItem('localRuleForm');
            }
          });
        } else {
          let message = jsonResult.message;
          this.$alert(message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    loadLocalRuleForm() {
      let localRuleFormString = localStorage.getItem('localRuleForm');
      let localRuleForm = JSON.parse(localRuleFormString);

      if (!localRuleForm) {
        this.$router.push('/house/new-house/add-new-1');
        return;
      }

      this.ruleForm = localRuleForm;
      if (this.ruleForm.houseImage != '') {
        this.data2 = JSON.parse(this.ruleForm.houseImage);
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    this.loadLocalRuleForm();
  }
}
</script>

<style>
.tips {
  background: #fcf6f6;
  border: 1px solid #aaa;
  padding: 10px 20px;
  margin-bottom: 24px;
  font-size: 12px;
}

.tips i {
  color: #F56C6C;
  font-style: normal;
}

.picture-list .picture-item {
  width: 230px;
  height: 230px;
  margin-right: 20px;
  margin-bottom: 20px;
  border: 1px solid #e8e6e6;
  border-radius: 6px;
  float: left;
  display: inline;
  position: relative;
}

.picture-list .picture-item .cover-flag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-left-radius: 6px;
}

.picture-list .picture-item .cover-flag .button {
  background: transparent;
  border: none;
  border-top-left-radius: 6px;
  font-size: 20px;
  padding: 8px;
}

.picture-list .picture-item .cover-flag .button:hover {
  background: #fcefef;
}

.picture-list .picture-item .cover-flag .cover {
  color: #f00;
}

.picture-list .picture-item .cover-flag .not-cover {
  color: #aaa;
}

.picture-list .picture-item .delete-button {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-right-radius: 6px;
}

.picture-list .picture-item .delete-button .button {
  border: none;
  border-bottom-right-radius: 6px;
}

.picture-list .picture-item .image {
  width: 230px;
  height: 230px;
  border-radius: 6px;
}

.picture-list .picture-uploader {
  float: left;
  width: 230px;
  height: 230px;
  margin-right: 20px;
  margin-bottom: 20px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

.picture-list .picture-uploader .picture-uploader-icon {
  width: 230px;
  height: 150px;
  font-size: 58px;
  color: #8c939d;
  line-height: 150px;
  text-align: center;
}

.picture-list .picture-uploader .picture-uploader-text {
  width: 230px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 12px;
  color: #8c939d;
}

.picture-list .picture-uploader .picture-uploader-text i {
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  color: #F56C6C;
}
</style>